<template>
  <div class="orderdetail-contain">
    <div class="state">
      <span>{{ statusText }}</span>
      <img src="../assets/images/car.png" alt="" />
    </div>
    <div class="address">
      <div class="icon">
        <van-icon name="logistics" />
      </div>
      <div class="addressinfo">
        {{ address.name }} - {{ address.tel }} - {{ address.province }} - {{ address.city }} - {{ address.country }} -
        {{ address.addressDetail }}
      </div>
    </div>
    <div class="orders">
      <div class="order" v-for="item in orders" :key="item.id">
        <img :src="item.thumb_path" />
        <div class="text">
          <div class="title">{{ item.title }}</div>
          <span class="price">￥{{ item.sell_price }}</span>
        </div>
      </div>
    </div>
    <div class="order-info">
      <div class="text">
        <span>下单时间</span><span>{{ $momentFun(orderInfo.add_time * 1000) }}</span>
      </div>
      <div class="text">
        <span>商品总价</span><span>{{ orderInfo.total_price }}</span>
      </div>
      <div class="text">
        <span>商品数量</span><span>{{ orderInfo.number }}</span>
      </div>
      <div class="text" v-if="orderInfo.status">
        <span>实付款</span><span>￥{{ orderInfo.actual_price }}</span>
      </div>
      <div class="text">
        <span>付款方式</span><span>{{ orderInfo.pay_way }}</span>
      </div>
      <div class="text"><span>运费险</span><span>￥0.00</span></div>
      <div class="text">
        <span>订单号</span
        ><span
          ><span>{{ orderInfo.order_id }}</span> <span @click="copy"> 复制</span></span
        >
      </div>
      <div class="text"><span>联系客服</span><van-tag plain type="primary" @click="relation">联系客服</van-tag></div>
    </div>
    <div class="btn">
      <van-button
        type="danger"
        v-if="orderInfo.status === 0 && orderInfo.is_cancel === 0"
        @click="pay(orderInfo.order_id)"
        >立即付款</van-button
      >
      <van-button
        type="primary"
        v-if="orderInfo.status === 1 && orderInfo.is_out == 0 && orderInfo.is_finish === 0"
        @click="$toast('已提醒商家')"
        >提醒发货</van-button
      >
      <van-button
        type="primary"
        v-if="orderInfo.status === 1 && orderInfo.is_out === 1 && orderInfo.is_finish === 0"
        @click="isShowFlow = true"
        >查看物流</van-button
      >
      <van-button type="primary" v-if="orderInfo.is_finish === 1">已完成</van-button>
      <van-button type="danger" v-if="orderInfo.is_cancel === 1" disabled>订单已取消</van-button>
    </div>
    <van-dialog v-model="isQrcode" title="扫码付款" @confirm="confirm">
      <div style="display: flex; align-items: center; justify-content: center">
        <img :src="pay_url" />
      </div>
    </van-dialog>
    <van-popup v-model="isShowFlow" position="bottom" :style="{ height: '50%' }">
      <div class="address">
        <div class="icon">
          <van-icon name="logistics" />
        </div>
        <div class="addressinfo">
          {{ address.name }} - {{ address.tel }} - {{ address.province }} - {{ address.city }} - {{ address.country }} -
          {{ address.addressDetail }}
        </div>
      </div>
      <van-steps direction="vertical" :active="0">
        <van-step v-for="(item, index) in flowInfo" :key="index">
          <h3>{{ item.location }}</h3>
          <p>{{ item.time }}</p>
        </van-step>
      </van-steps>
    </van-popup>
  </div>
</template>

<script>
import { getShopCarList, getOrderInfo, getPayQrcode, getPayStatus, materialFlow } from "@/api";
import QRCode from "qrcode";
export default {
  data() {
    return {
      address: {},
      ordersIds: [],
      orders: [],
      orderInfo: {},
      isQrcode: false,
      pay_url: "",
      timer: "",
      isShowFlow: false,
      active: 1,
      flowInfo: [],
    };
  },
  computed: {
    statusText() {
      // 未支付
      if (this.orderInfo.status === 0 && this.orderInfo.is_cancel === 0) {
        return "等待付款";
      }
      // 支付了，未发货
      if (this.orderInfo.status === 1 && this.orderInfo.is_out === 0 && this.orderInfo.is_finish === 0) {
        return "待发货";
      }
      // 支付了，已发货
      if (this.orderInfo.status === 1 && this.orderInfo.is_out === 1 && this.orderInfo.is_finish === 0) {
        return "包裹正在派送中...";
      }
      // 已完成
      if (this.orderInfo.is_finish === 1) {
        return "已完成";
      }
      // 已取消
      if (this.orderInfo.is_cancel === 1) {
        return "已取消";
      }
      return "";
    },
  },
  methods: {
    // 单击确定时，清除定时器
    confirm() {
      this.isQrcode = false;
    },
    // 复制
    copy() {
      navigator.clipboard
        .writeText(this.orderInfo.order_id)
        .then(() => {
          this.$toast("复制完成");
        })
        .catch(() => {});
    },
    // 支付
    async pay(orderId) {
      let { status, data } = await getPayQrcode(orderId);
      if (status == 200) {
        const pay_url = await QRCode.toDataURL(data.code_url);
        this.isQrcode = true;
        this.pay_url = pay_url;
      } else {
        this.$toast("生成二维码失败");
      }
    },
    //联系
    relation() {
      this.$dialog
        .confirm({
          message: "请拨打 18870946508",
          confirmButtonText: "拨打",
          confirmButtonColor: "red",
        })
        .then(() => {})
        .catch(() => {});
    },
    async getOrderInfo() {
      // 获取订单信息
      let data = await getOrderInfo(this.$route.params.orderSerialNum);
      this.orderInfo = data;
      this.address = data.address_info;
      this.$store.state.shopCarList.forEach((item) => {
        this.ordersIds.push(item.id);
      });
      let { message } = await getShopCarList(this.orderInfo.goods_ids);
      this.orders = message;
    },
    // 获取订单状态
    getOrderStatus() {
      if (this.orderInfo.status === 1) {
        clearInterval(this.timer);
        return;
      }
      this.timer = setInterval(async () => {
        let { code, message } = await getPayStatus(this.$route.params.orderSerialNum);
        if (code === 20000) {
          clearInterval(this.timer);
          this.isQrcode = false;
          this.getOrderInfo();
          this.$toast.success({
            message,
            icon: "wechat-pay",
          });
        }
      }, 2000);
    },
  },
  async mounted() {
    await this.getOrderInfo();
    let data = await materialFlow();
    this.flowInfo = data;
    this.getOrderStatus();
  },
  // 页面销毁时也要清除定时器
  // eslint-disable-next-line vue/no-deprecated-destroyed-lifecycle
  beforeDestroy() {
    clearInterval(this.timer);
    this.isQrcode = false;
  },
};
</script>

<style lang="scss" scoped>
.orderdetail-contain {
  background: #fff;
  // height: 100vh;
  .state {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 90px;
    font-size: 18px;
    color: #fafafa;
    background: #e35818;

    img {
      width: 80px;
      height: 80px;
    }
  }

  .address {
    display: flex;
    padding: 6px;
    margin: 10px 0;

    .icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50px;
      height: 30px;
      margin-right: 10px;
      color: #fff;
      background: #f34a09;
      border-radius: 50px;
    }

    .addressinfo {
      font-size: 14px;
      line-height: 20px;
    }
  }

  .orders {
    .order {
      display: flex;
      align-items: center;
      height: 104px;
      padding: 0 10px;
      margin-bottom: 5px;
      background: #fafafa;

      img {
        width: 88px;
        height: 88px;
        margin-right: 10px;
      }

      .text {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 80px;
        font-size: 12px;
        line-height: 18px;

        .price {
          font-size: 16px;
        }
      }
    }
  }

  .order-info {
    padding: 0 10px;
    font-size: 14px;
    color: #787373;

    .text {
      display: flex;
      justify-content: space-between;
      margin: 10px 0;

      .van-tag {
        padding: 5px 3px;
      }
    }
  }

  .btn {
    position: fixed;
    bottom: 0;
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
    padding: 10px;
    background: #fff;
    box-shadow: 0 0 10px #ccc;
  }
}
</style>
